<template>
  <div  class="weChatAccountBox" ref="weChatRef" id="weiChatId">
    <div :class="message" ref="boxFather">
         <transition name="el-fade-in-linear">
    <div class="leftFriendBox" v-show="show">


      <div class="accountInfo" v-if="accountData">
        <img
          class="accountActr"
          :src="accountData.avatar"
          alt=""
        />
        <div class="accountInfoText" >
          <p class="titleAccount" style="font-size: 14px; font-weight: 1000;">
            {{accountData.nick}}
            <img class="accountSex" v-if="accountData.sex==1"  src="../../../assets/images/weChatQQ/man.png" alt="">
            <img v-else-if="accountData.sex==2" style="width:0.06rem;height:0.06rem"  src="../../../assets/images/weChatQQ/women.png" alt="">
            <img v-else style="width:0.06rem;height:0.06rem" title="未知性别" src="../../../assets/images/weChatQQ/weizhi.png" alt="">
          </p>
          <p style="font-size:12px">账号:{{accountData.username}}</p>

          <p v-if="accountData.signature" class="mainRemark" style="font-size:12px;" :title="accountData.signature">签名:{{accountData.signature}}</p>
        </div>
      </div>
      <div class="friendList" ref="friendList">
        <!-- loading -->
      <loadingTem :size='size' class="loadingBox" v-if="showLoading" />

        <div class="card-container">
          <a-tabs type="card" v-model="tab"  style="padding:0;" @tabClick="handleClick">
            <a-tab-pane key="1" name="好友列表" tab="好友列表">
              <a-input-search placeholder="搜索好友列表" v-model="searchWord" style="width: 100%" @search="onSearchStart1" />
              <div class="friendListBox" ref="friendListBoxRefs">
                <div class="friendListItem" v-for="(item,index) in friendListData" :key="index">

                    <div class="acImg" v-if="item.avatar">
                       <div class="demo-image__preview">
                          <el-image
                              style="width:75%; height: 75%;border-radius: 5px;"
                              :src="item.avatar"
                              :preview-src-list="srcList">
                          </el-image>
                        </div>
                    </div>
                    <div class="acImg" v-else>
                       <div class="demo-image__preview">
                          <img style="width:75%; height: 75%" src="../../../assets/images/weChatQQ/wechatFriend.png" alt="">
                        </div>
                    </div>
                    <div class="friendAccoundInfo" >
                        <div class="nickName">
                          <span v-if="item.nick" :title="item.remark?item.remark:item.nick">{{item.nick}}<span v-if="item.remark">({{item.remark}})</span></span>
                          <div style="display:inline-block;">
                              <img class="friendSex" v-if="item.sex==1" src="../../../assets/images/weChatQQ/man.png" alt="">
                              <img class="friendSex" v-else-if="item.sex==2" src="../../../assets/images/weChatQQ/women.png" alt="">
                              <img class="friendSex" v-else src="../../../assets/images/weChatQQ/weizhi.png" alt="">
                          </div>
                        </div>
                        <div class="accountNumber" :title="item.username?item.username:item.alias">
                        账号:<span v-if="item.alias">{{item.alias}}</span>
                            <span v-else>{{item.username}}</span>
                        </div>
                        <div class="remark" v-if="item.signature" :title="item.signature">签名:{{item.signature}}</div>
                        <div class="remark" v-if="item.province">
                          地区:
                          <span v-if="item.province">{{item.province}}</span>-
                          <span v-if="item.city">{{item.city}}</span>
                           </div>
                        <div class="delNumber" title="点击查看消息详情" @click="checkWeChatMessage(item,0)">消息数量:{{item.cnt==item.delCnt?'0':item.cnt}}  </div>
                      <div class="delMessage" @click="checkWeChatMessage(item,1)" style="color:red;">删除消息:({{item.delCnt}})</div>
                    </div>
                    <!-- <a-button title="查看聊天记录" ><i style="font-weight:1000;font-size:0.08rem;" class="el-icon-chat-line-round"></i></a-button> -->
                </div>
              </div>
                <div style="display:flex;margin-top:15px;">
                      <div class="block">
                        <el-pagination
                        :small="true"
                        :hide-on-single-page="offset==1?true:false"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="offset"
                          :page-size="limit"
                          layout="total,prev,next,jumper"
                          :total="totalFriend">
                        </el-pagination>
                      </div>
                </div>
                <span style="height:20px;margin-left:4px;">共 {{Math.ceil(totalFriend/limit)}} 页</span>
            </a-tab-pane>
            <a-tab-pane key="2" name="群列表" tab="群列表">
              <a-input-search placeholder="搜索群组列表" v-model="searchWord" style="width: 100%" @search="onSearchStart2" />
              <div class="friendListBox" ref="friendListBoxRefs2">
                <div class="friendListItem" v-for="(groupItem,index) in groupListData" :key="index">
                    <div class="acImg">
                       <div class="demo-image__preview">
                          <img style="width:75%; height: 75%" src="../../../assets/images/weChatQQ/group.png" alt="">
                        </div>
                    </div>
                    <div class="friendAccoundInfo" >
                        <div class="nickName">
                          <span v-if="groupItem.groupnick" :title="groupItem.groupnick">{{groupItem.groupnick}}</span>
                          <div style="display:inline-block;">
                          </div>
                        </div>
                        <div class="accountNumber" :title="groupItem.groupname">账号:{{groupItem.groupname}}</div>
                        <div class="remark" v-if="groupItem.signature" :title="groupItem.signature">公告:{{groupItem.signature}}</div>
                        <div class="delNumber" title="点击查看消息详情" @click="checkGroupMessage(groupItem,0)">消息数量:{{groupItem.cnt==groupItem.delCnt?'0':groupItem.cnt}}</div>
                        <span class="qunchengyuan" @click="viewsGroupList(groupItem)">群成员({{groupItem.membercount?groupItem.membercount:0}})</span>
                        <span class="delMessage" @click="checkGroupMessage(groupItem,1)" style="color:red;">删除消息:{{groupItem.delCnt}}</span>
                    </div>
                </div>
              </div>

                    <div style="display:flex;margin-top:15px;">
                      <div class="block">
                        <el-pagination
                        :small="true"
                        :hide-on-single-page="totalGroup<groupLimit?true:false"
                          @size-change="handleSizeChangeGroup"
                          @current-change="handleCurrentChangeGroup"
                          :current-page="groupOffset"
                          :page-size="groupLimit"
                          layout="total,  prev,next,jumper"
                          :total="totalGroup">
                        </el-pagination>
                      </div>
                </div>
                  <span style="height:20px;margin-left:4px;">共 {{Math.ceil(totalGroup/groupLimit)}} 页</span>
            </a-tab-pane>
            <a-tab-pane key="3" name="公众号" tab="公众号">
              <a-input-search placeholder="搜索公众号列表" v-model="searchWord" style="width: 100%" @search="onSearchStart3" />
              <div class="friendListBox" ref="friendListBoxRefs3">
                <div class="friendListItem" v-for="(item,index) in publicListData" :key="index">
                    <div class="acImg" v-if="item.avatar">
                       <div class="demo-image__preview">
                          <el-image
                              style="width:75%; height: 75%;border-radius: 5px;"
                              :src="item.avatar"
                              :preview-src-list="srcList">
                          </el-image>
                        </div>
                    </div>
                    <div class="acImg" v-else>
                       <div class="demo-image__preview">
                          <img style="width:75%; height: 75%" src="../../../assets/images/weChatQQ/wechatFriend.png" alt="">
                        </div>
                    </div>
                    <div class="friendAccoundInfo" >
                        <div class="nickName">
                          <span v-if="item.nick" :title="item.nick">{{item.nick}}</span>
                          <div style="display:inline-block;">
                              <img class="friendSex" v-if="item.sex==1" src="../../../assets/images/weChatQQ/man.png" alt="">
                              <img class="friendSex" v-else-if="item.sex==2" src="../../../assets/images/weChatQQ/women.png" alt="">
                              <img class="friendSex" v-else src="../../../assets/images/weChatQQ/weizhi.png" alt="">
                          </div>
                          </div>
                        <div class="accountNumber" :title="item.username">账号:{{item.username}}</div>
                        <div class="remark" v-if="item.signature" :title="item.signature">简介:{{item.signature}}</div>
                        <div class="remark" v-if="item.province">
                          地区:
                          <span v-if="item.province">{{item.province}}</span>-
                          <span v-if="item.city">{{item.city}}</span>
                           </div>
                        <div class="delNumber" title="点击查看消息详情" @click="viewsPublicMessage(item,0)">消息数量:{{item.cnt}}</div>
                    </div>
                </div>
              </div>
                    <div style="display:flex;margin-top:15px;">
                      <div class="block">
                        <el-pagination
                          :hide-on-single-page="publicTotal<publicLimit?true:false"
                          :small="true"
                          @size-change="handleSizeChangePublic"
                          @current-change="handleCurrentChangePublic"
                          :current-page="publicOffset"
                          :page-size="publicLimit"
                          layout="total,prev,next,jumper"
                          :total="publicTotal">
                        </el-pagination>
                      </div>
                </div>
                  <span style="height:20px;margin-left:4px;">共 {{Math.ceil(publicTotal/publicLimit)}} 页</span>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
         </transition>
         <keep-alive>
            <weChatMessage ref="wechatBox" v-if="showMessageList" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' />
            <weChatGroup v-if="showGroup" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit'/>
            <wechatpublic v-if="showPublic" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit'/>
         </keep-alive>
    </div>

    <a-modal
    :maskClosable="false"
    :getContainer="getRefsAff" v-model="visibleGroup" width="80%" title="群成员列表">
           <div style="padding:0 2.5%">
            <a-input-search :placeholder="$t('wechat.searckKey')" v-model="searchkeyModal" style="width: 200px;margin-bottom:10px;float:right;" @search="initQunList" />
        </div>
       <el-table
    :data="tableData"
    height="60vh"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="账户"
      >
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="昵称"
      >
    </el-table-column>
  </el-table>
   <div class="block">
    <el-pagination
      @size-change="handleSizeChangeModal"
      @current-change="handleCurrentChangeModal"
      :current-page="groupModalOffset"
      :page-size="groupModalLimit"
      layout="total, prev, next, jumper"
      :total="groupModalTotal">
    </el-pagination>
  </div>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import weChatMessage from './weChatMessage.vue'
import weChatGroup from './weChatGroupMessage.vue'
import wechatpublic from './weChatPublicMessage.vue'
import { getWeChatAccountInfo,getWeChatFriendList,getWeChatGroupList,getWeChatPublicList,getWeChatFriendMessageList,searchFunction,getWeChatGroup_number } from '@/api/weChat/weChat_api'
import loadingTem from '../loading/index.vue'

export default {
  props:['sendData'],
  name: "qqChat",
  components:{
      weChatMessage,
      loadingTem,
      weChatGroup,
      wechatpublic
  },
  data(){
      return{
        tab:'1',
        offsetLimit:'',
        recovery:0,
        searchkeyModal:'',
        visibleGroup:false,
        tableData:[],
        searchWord:'',
        name:'好友列表',
        chatWithObj:'',
        totalFriend:0,
        showLoading:false,
        showGroup:false,
        showPublic:false,
        size:'100px',
        friendListData:[],
        groupListData:[],
        publicListData:[],
        accountData:'',
        current:1,
        // 好友
        offset:1,
        limit:10,
        total:0,
        // 群组
        groupOffset:1,
        groupLimit:10,
        totalGroup:0,
        // 公众号
        publicOffset:1,
        publicLimit:10,
        publicTotal:0,

        // 群成员
        groupModalOffset:1,
        groupModalLimit:20,
        groupModalTotal:0,
        qunData:'',

        showMessageList:false,
        srcGZ:require('../../../assets/images/weChatQQ/wechatLogo.jpg'),
          show:true,
          message:'leftBox',
          liaotian:'',
          boxShow:'',
          url:require('../../../assets/images/weChatQQ/1644384118(1).jpg'),
          srcList:[],
          src:require('../../../assets/images/weChatQQ/qun.jpg'),
          srcListElse:[require('../../../assets/images/weChatQQ/wechatFriend.png')]
      }
  },
  watch:{
    '$store.state.account.weChat':function(){
      if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
          this.tab='1'
          this.offset=this.sendData.list_offset;
          this.limit=this.sendData.list_limit;
        }else if(this.sendData.app_name=='群组'){
          this.tab='2'
          this.groupOffset=this.sendData.list_offset;
          this.groupLimit=this.sendData.list_limit;
          // this.onSearch2()
        }else{
          this.tab='3'
        }
      }else{
      // this.offset=1
      this.offset=1
      this.showMessageList=false
      
      this.showMessageList=false
      this.showGroup=false
      this.showPublic=false
      this.offset=1
      this.total=0

      this.groupOffset=1
      this.totalGroup=0

      this.groupModalOffset=1
      this.groupModalTotal=0
      }

      this.init()
    }
  },
  created(){
    this.sendDataMsg=this.sendData;
    if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
          this.tab='1'
          this.offset=this.sendData.list_offset;
          this.limit=this.sendData.list_limit;
        }else if(this.sendData.app_name=='群组'){
          this.tab='2'
          this.groupOffset=this.sendData.list_offset;
          this.groupLimit=this.sendData.list_limit;
          // this.onSearch2()
        }else{
          this.tab='3'
        }
      }else{
      // this.offset=1
      }
      this.init()
  },
  methods: {
    // 群成员分页
      handleSizeChangeModal(val) {
        this.groupModalLimit=val
        this.initQunList();
      },
      handleCurrentChangeModal(val) {
        this.groupModalOffset=val
        this.initQunList();
      },
      getRefsAff(){
        return  this.$refs.weChatRef
      },
    viewsGroupList(item){
      this.groupModalOffset=1
      this.searchkeyModal=''
      this.visibleGroup=true
      this.qunData=item
      this.initQunList()
    },
    initQunList(){
      let data={
        proof_num:this.qunData.proof_num,
        groupid:this.qunData.groupid,
        searchkey:this.searchkeyModal,
        offset:this.groupModalOffset,
        limit:this.groupModalLimit,
      }
      getWeChatGroup_number(data).then(res=>{
        this.tableData=res.data
        this.groupModalTotal=res.data[0].cnt
      })
    },
    domFunction(){
      return this.$refs.weChatRef
    },
    onSearchStart1(){
      this.offset=1
      this.onSearch1()
    },
    onSearchStart2(){
      this.groupOffset=1
      this.onSearch2()
    },
    onSearchStart3(){
      this.publicOffset=1
      this.onSearch3()
    },
    // 查看微信好友聊天
    checkWeChatMessage(item,number,offset){
      this.offsetLimit={
        offset:this.offset,
        limit:this.limit,
        label:this.sendData.label,
        msg_offset:offset,
        recovery:this.sendData.recovery
      }
      this.recovery=number
      // this.total=res.data[0].cntlog(item)
      this.$store.commit('SET_WECHATMESSAGE',Date.parse(new Date()));
      this.chatWithObj=item
      sessionStorage.setItem('flag','friend')
      this.showMessageList=true
      this.showGroup=false
      this.showPublic=false
    },
    // 查看群组聊天
    checkGroupMessage(item,number,offset){
      this.offsetLimit={
        offset:this.groupOffset,
        limit:this.groupLimit,
        label:this.sendData.label,
        msg_offset:offset,
        recovery:this.sendData.recovery
      }
      // console.log(this.offsetLimit)
      // return
      this.recovery=number
      sessionStorage.setItem('flag','group')
      this.$store.commit('SET_WECHATGROUPMESSAGE',Date.parse(new Date()))
      this.chatWithObj=item
      this.showMessageList=false
      this.showPublic=false
      this.showGroup=true
    },
    // 查看公众号聊天
    viewsPublicMessage(item,number){
      this.recovery=number
      sessionStorage.setItem('flag','public')
      this.$store.commit('SET_WECHATPUBLICMESSAGE',Date.parse(new Date()))
      this.chatWithObj=item
      this.showMessageList=false
      this.showGroup=false
      this.showPublic=true
    },
    handleClick(tab) {
    },
    // 初始化请求     账号信息
    init(){
      let nodeData=JSON.parse(sessionStorage.getItem('sumData'))

      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        username:this.sendData.username,
        model:this.sendData.model
      }
      getWeChatAccountInfo(data).then(res=>{
        this.accountData=res.data[0]
        this.onSearch1()
        this.onSearch2()
        this.onSearch3()
      })
    },
    getPublicList(){
      let data={
        proof_num:this.sendData.proof_num,
        account_id:this.sendData.account_id,
        offset:this.publicOffset,
        limit:this.publicLimit
      }
      getWeChatPublicList(data).then(res=>{
          this.$refs.friendList.scrollTop=0
          this.publicListData=res.data
      })
    },
    // 群组列表
    groupList(){
      let data={
        proof_num:this.sendData.proof_num,
        account_id:this.sendData.account_id,
        offset:this.groupOffset,
        limit:this.groupLimit
      }
      getWeChatGroupList(data).then(res=>{
          this.$refs.friendList.scrollTop=0
          this.groupListData=res.data
      })
    },

    // 获取好友列表
    getFriendsList(){
      this.showLoading=true
      let nodeData=JSON.parse(sessionStorage.getItem('sumData'))

      let data={
        proof_num:this.sendData.proof_num,
        account_id:this.sendData.account_id,
        offset:this.offset,
        limit:this.limit
      }
        getWeChatFriendList(data).then(res=>{
          this.$refs.friendList.scrollTop=0
          this.friendListData=res.data
          res.data.forEach(element => {
            this.srcList.push(element.avatar)
          });
          this.showLoading=false
        }).catch(err=>{
          this.showLoading=false
        })
    },
    //打印
    printPdf(index, row){
        // this.$print(this.$refs.print) // 使用
        // let dom=this.$refs.topBox
        // dom.style=` 'height' : '1000px', //高度自动
        // 'overflow' : 'visible' //在打印之前把这个div的overflow改成全部显示`
            printJS({
                printable: 'weiChatId',
                type: 'html',
                // css:'../../../styles/weChat.css',
                //properties: [
                //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                //],
                // header: `<p class="custom-p"> 名单 </p>`,
                // style:'',
                // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                // repeatTableHeader: true,
                // scanStyles:false,
                targetStyles: ['*'],
                ignoreElements:['no-print','bc','gb']
    })
    },
    //打印
    // printPdf(){
    //     html2canvas(document.getElementById('weiChatId')).then(function(canvas) {
    //        var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
    //        print(imgageData, 'image');
    //     });
    // },
    onSearch1() {
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord,
        model:this.sendData.model,
        offset:this.offset,
        limit:this.limit
      }
      searchFunction(data,'/search/tencent/contact').then(res=>{
          this.$refs.friendList.scrollTop=0
          this.friendListData=res.data

          this.totalFriend=res.data[0].totle
          res.data.forEach(element => {
            this.srcList.push(element.avatar)
          });
          if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
          this.friendListData.forEach(element=>{
            if(element.username==this.sendData.contact_username){
              this.checkWeChatMessage(element,0,this.sendData.msg_offset)
            }
          })


        }else{

        }
    }
          this.showLoading=false
      }).catch(err=>{
          this.showLoading=false
      })
    },
    onSearch2() {
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord,
        model:this.sendData.model,
        offset:this.groupOffset,
        limit:this.groupLimit
      }
      searchFunction(data,'/search/tencent/group').then(res=>{
          this.$refs.friendList.scrollTop=0
          this.groupListData=res.data
          this.totalGroup=res.data[0].totle

          if(this.sendData.list_offset){
        if(this.sendData.app_name=='群组'){

          this.groupListData.forEach(element=>{
            if(element.groupname==this.sendData.contact_username){
              this.checkGroupMessage(element,0,this.sendData.msg_offset)
            }
          })


        }else{

        }
    }
      })
    },
    onSearch3() {
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord,
        model:this.sendData.model,
        offset:this.publicOffset,
        limit:this.publicLimit
      }
      searchFunction(data,'/search/tencent/officialaccounts').then(res=>{
          this.$refs.friendList.scrollTop=0
          this.publicListData=res.data
          this.publicTotal=res.data[0].totle
      })
    },
    callback(key) {
    },
    hideList(){
        this.show=false
        this.message='unshowLeftBox'
    },
    showList(){
        this.show=true
    },
    closeMessageBox(number){
    },

    // 好友
    handleSizeChange(val) {
      this.limit=val
      this.onSearch1()
    },
    handleCurrentChange(val) {
      this.offset=val
      this.onSearch1()
      this.$refs.friendListBoxRefs.scrollTop=0
    },
    // 群组
    handleSizeChangeGroup(val) {
      this.groupLimit=val
      this.onSearch2();
    },
    handleCurrentChangeGroup(val) {
      this.groupOffset=val
      this.onSearch2()
      this.$refs.friendListBoxRefs2.scrollTop=0

    },
    // 公众号
    handleSizeChangePublic(val) {
      this.publicLimit=val
      this.onSearch3()
    },
    handleCurrentChangePublic(val) {
      this.publicOffset=val
      this.onSearch3()
      this.$refs.friendListBoxRefs3.scrollTop=0

    }
  },
};
</script>
<style >
.ant-pagination-total-text{
    line-height: 32px;
}
</style>
<style scoped>
.delMessage{
  text-decoration: underline;
  cursor: pointer;
}
.delMessage:hover{
  font-weight: bold;
}
.qunchengyuan{
  width: 120px;
    text-decoration: underline;
    color: #409eff;
    cursor: pointer;
    position: relative;
    z-index: 1000;
    margin-right: 20px;
    /* right: 0; */
}
.qunchengyuan:hover{
    color: #135bf7;
}
.loadingBox{

}
.block{
  text-align: center;
}
.tishiInfo{
  font-size: 20px;
  font-weight: bold;
  color: rgb(185, 185, 185);
}
.unShowMessageListBox{
  /* position: absolute;
  right: 30px;
  width: 200px;
  height: 50px;
  background: red;
  z-index: 10000; */
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  align-items: center;
  border-radius: 5px;
}
.delNumber{
  width: 120px;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  margin-top: 20px;
}
.delNumber:hover{
  color: rgb(46, 85, 255);
}
.donghua{
    transition: 1s linear;
}
.leftFriendBox{
    width:391px;
    max-height: 785px;
    position: relative;
    margin-right: 10px;

}
.friendSex{
  width: 13px;
  height: 13px;
  margin-left: 5px;

}


/* .shouqi{
    position: absolute;
    width: .12rem;
    text-align: center;
    padding-top: .05rem;
    height: .2rem;
    background: #fff;
    left: -.14rem;
    font-size: .05rem;
    top: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    cursor: pointer;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #e7e7e7;
} */

.accountNumber{
    float: left;
    width: 100%;
    padding-left: 47px;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;

}
.mainRemark{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.remark{
    width: 282px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
/* .sex{
    float: right;
    margin-right: .1rem;
} */
.nickName{
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    float: left;
    padding-left: 47px;
}
.friendAccoundInfo{
    min-height: 100px;
    margin-top: 7.5px;
    width: 321px;
    padding: 5px 10px;
    color: rgb(82, 82, 82);
    margin-bottom: 5px;
    font-size: 12px;
    font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
}
.acImg{
    width: 46px;
    height: 46px;
    position: absolute;
    top: 15px;
    left:28px;

}
.friendListItem{
  position: relative;

    min-height: 114.5px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
    border-bottom: 2px solid rgb(231, 231, 231);
}
.friendList {
  position: relative;
  height: 647px;
  background: rgb(253, 253, 253);
  margin-top: 10px;
  overflow-y: auto;
  border-radius: 5px;
}

.friendList::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.friendList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.friendList::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.accountInfoText {
  margin-left: 10px;
  height: 62px;
  width: 206px;
}
.accountActr {
  display: block;
  width: 63px;
  height: 63px;
  border-radius: 10px;
}
.accountInfo {
  height: 94.8px;
  width: 391px;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  padding: 0 15px;
  min-height: 93px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.weChatAccountBox {
  position: relative;
  width: 100%;
  /* display: flex; */
  justify-content: space-between;
}
.leftBox {
  position: relative;
  width: 850px;
  height: 91.5vh;
  min-width: 800px;
  display: flex;
  padding: 10px;
  background: rgb(241, 241, 241);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
}
/* .unshowLeftBox{
  position: relative;
  width: 5.6rem;
  min-width: 100px;
  height: 5.1rem;
  display: flex;
  padding: 10px;
  background: rgb(223, 223, 223);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  transition: .5s linear;
} */
/* .close{
    position: absolute;
    right: -.1rem;
    top: -.05rem;
    width: .15rem;
    height: .15rem;
    font-size: .12rem;
    border-radius: 50%;
    line-height: .17rem;
    text-align: center;
    background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-weight: bold;
  cursor: pointer;
} */
/* .rightBox {
  width: 6.3rem;
  height: 5.1rem;
 
  display: flex;
  justify-content: space-between;
  background:rgb(241, 241, 241);
  overflow-x: auto;

} */

.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 10px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
p{
    margin: 0;
}
.accountSex{
  width: 12.5px;
  height: 12.5px;
}
  /* .dayin{
    color: #000;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .dayin:hover{
    color: #409eff;
  } */

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .dayin{
    color: #000;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .dayin:hover{
    color: #409eff;
  }

.shouqi{

}
.accountInfoText {
  height: 0.3rem;
  width: .8rem;
}
  .leftBox {
  position: relative;
  width: 3rem;
  height: 3.87rem;
  min-width: 706px;
  display: flex;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: rgb(241, 241, 241);
}
.accountNumber{
    float: left;
    padding-left: .2rem;
        text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.unshowLeftBox{
  position: relative;
  /* width: 5.6rem; */
  min-width: 100px;
  height: 3.9rem;
  display: flex;
  padding: 10px;
  background: rgb(223, 223, 223);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  transition: .5s linear;
}

.friendList {
  height: 3.28rem;
  background: rgb(238, 238, 238);
  margin-top: 10px;
  overflow-y: auto;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.leftFriendBox{
  width:1.2rem;
    position: relative;
    margin-right: 10px;
}

.accountInfo {
  height: .5rem;
  width:1.2rem;
  background: rgb(253, 253, 253);
  display: flex;
  align-items: center;
  padding: 0 0.05rem;
  min-height: 93px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.accountActr {
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 10px;
}

.shouqi{
    position: absolute;
    width: .12rem;
    text-align: center;
    padding-top: .01rem;
    height: .15rem;
    background: #fff;
    left: -.12rem;
    font-size: .1rem;
    top: 1.7rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    cursor: pointer;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #e7e7e7;
}
.friendAccoundInfo{
    min-height: .3rem;
    margin-top: .05rem;
    width: 0.9rem;
    /* padding: 5px 10px; */
    color: rgb(82, 82, 82);
    margin-bottom: .05rem;
    font-size: .05rem;
    font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
}
.acImg{
    width: .2rem;
    height: .2rem;
    position: absolute;
    top: .07rem;
    left: .07rem;
}
.remark{
    width: .8rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.nickName{
    width: .8rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    float: left;
    padding-left: .2rem;
}
.friendListItem{
  position: relative;
    min-height: .1rem;
    width: 100%;
    display: flex;
    align-items: center;
    /* padding: 0 10px; */
    justify-content: space-between;
    border-bottom: 2px solid rgb(231, 231, 231);
}
.ant-tabs-tabpane ant-tabs-tabpane-active{
}
.accountSex{
  width: 0.06rem;
  height: 0.06rem;
}
.friendSex{
  width: 0.055rem;
  height: 0.055rem;
  margin-left: 5px;

}
.friendListBox{
  width: 100%;
  height: 59vh;
  overflow: hidden;
  overflow-y: auto;
}
.friendListBox::-webkit-scrollbar {
  width: 6px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.friendListBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.friendListBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
}
</style>
